<template>
  <div>
    <div class="tips">
      一级合伙人合计数据包括合伙人及其所有下级合伙人的总和
    </div>
    <div class="top-operate-default mar-t-15">
      <div class="search-item">
        <label>时间搜索：</label>
        <el-date-picker v-model="datePicker" type="daterange" unlink-panels :picker-options="pickerOptions" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
        <label class="mar-l-20">合伙人：</label>
        <el-select v-model="entityListQuery.partnerType" placeholder class="pad-l-10">
          <el-option v-for="item in partnerTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="mar-l-20">搜索合伙人：</label>
        <el-input @keyup.enter.native="handleSearch" v-model.trim="entityListQuery.realName" placeholder="请输入合伙人姓名" style="width: 200px;"></el-input>
        <el-button type="primary" @click="handleSearch" class="mar-l-20">查询</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="total-bar height-123">
      <div class="grid-content">
        <div class="font-28 font-w">￥{{ partnerIncome.totalOrderAmount }}</div>
        <div class="mar-t-8 font-color-9 font-16">合计业绩(元)</div>
      </div>
      <div class="grid-content">
        <div class="font-28 font-w">￥{{ partnerIncome.totalShareOrderAmount }}</div>
        <div class="mar-t-8 font-color-9 font-16">合计提成(元)</div>
      </div>
      <div class="grid-content">
        <div class="font-28 font-w">{{ partnerIncome.totalOrderNum }}</div>
        <div class="mar-t-8 font-color-9 font-16">新增订单(笔)</div>
      </div>         
      <div class="grid-content">
        <div class="font-28 font-w">{{ partnerIncome.totalRecruiterNum }}</div>
        <div class="mar-t-8 font-color-9 font-16">新增招募员(人)</div>
      </div>         
      <div class="grid-content">
        <div class="font-28 font-w">{{ partnerIncome.totalMemberNum }}</div>
        <div class="mar-t-8 font-color-9 font-16">新增云店(个)</div>
      </div>          
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="partnerIncomeList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中" style="width: 100%"
        header-cell-class-name="default-header" row-class-name="default-row">
        <el-table-column label="合伙人名称" prop="partnerName" align="left"></el-table-column>
        <el-table-column label="上级合伙人名称" prop="onePartnerName" align="left"></el-table-column>
        <el-table-column label="下级合伙人数(个)" prop="twoPartnerNum" align="left">
          <template slot-scope="scope" v-if="scope.row.partnerType == 1">
            <span class="font-blue" @click="showTwoPartner(scope.row)">{{ scope.row.twoPartnerNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="招募员数(人)" prop="recruiterNum" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.partnerType == 1" class="line-h-14">
              <div>{{ scope.row.oneRecruiterNum * 1 + scope.row.twoRecruiterNum * 1 }}</div>
              <div class="font-12"><span class="font-color-9">直接发展：</span> {{ scope.row.oneRecruiterNum }}</div>
              <div class="font-12"><span class="font-color-9">下级发展：</span> {{ scope.row.twoRecruiterNum }}</div>
            </div>
            <div v-else>
              <span>{{ scope.row.twoRecruiterNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="云店数(个)" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.partnerType == 1" class="line-h-14">
              <div>{{ scope.row.oneMemberNum * 1 + scope.row.twoMemberNum * 1 }}</div>
              <div class="font-12"><span class="font-color-9">直接发展：</span> {{ scope.row.oneMemberNum }}</div>
              <div class="font-12"><span class="font-color-9">下级发展：</span> {{ scope.row.twoMemberNum }}</div>
            </div>
            <div v-else>
              <span>{{ scope.row.twoMemberNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单数（笔）" prop="orderNum" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.partnerType == 1" class="line-h-14">
              <div>{{ scope.row.oneOrderNum * 1 + scope.row.twoOrderNum * 1 }}</div>
              <div class="font-12"><span class="font-color-9">直接销售：</span> {{ scope.row.oneOrderNum }}</div>
              <div class="font-12"><span class="font-color-9">下级销售：</span> {{ scope.row.twoOrderNum }}</div>
            </div>
            <div v-else>
              <span>{{ scope.row.twoOrderNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="业绩（元）" prop="orderAmount" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.partnerType == 1" class="line-h-14">
              <div>￥{{(scope.row.oneOrderAmount * 1 + scope.row.twoOrderAmount * 1).toFixed(2) }}</div>
              <div class="font-12"><span class="font-color-9">直接销售：</span> ￥{{ scope.row.oneOrderAmount }}</div>
              <div class="font-12"><span class="font-color-9">下级销售：</span> ￥{{ scope.row.twoOrderAmount }}</div>
            </div>
            <div v-else>
              <span>￥{{ scope.row.twoOrderAmount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="提成（元）" prop="shareOrderAmount" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.partnerType == 1">
              <span>￥{{(scope.row.oneShareOrderAmount * 1 + scope.row.twoShareOrderAmount * 1).toFixed(2) }}</span>
            </div>
            <div v-else>
              <span>￥{{ scope.row.twoShareOrderAmount }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="entityListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="entityListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { pagingPartner, statPartnerIncome } from '@/api/user/enterprisePartner'
import elDragDialog from '@/directive/el-dragDialog'
import { downloadFile } from '@/api/common/common'

export default {
  directives: {
    // 拖动窗口
    elDragDialog
  },
  data() {
    return {
      partnerTypes: [{
        value: '1',
        label: '一级合伙人'
      }, {
        value: '2',
        label: '二级合伙人'
      }],
      datePicker: [],
      partnerIncomeList: [],
      total: null,
      listLoading: true,
      multipleSelection: [],
      entityListQuery: {
        enterpriseId: this.getEnterpriseId(),
        currentPage: 1,
        size: 10,
        partnerType: '1',
        startDate: '',
        endDate: '',
        commissionType: 1
      },
      partnerIncome: {
        totalOrderAmount: 0,
        totalShareOrderAmount: 0,
        totalOrderNum: 0,
        totalRecruiterNum: 0,
        totalMemberNum: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },

  // 初始化页面
  created() {
    this.initEntityList()
  },
  methods: {
    close() {
      this.dialogFormVisible = false
    },
    handleDialogClose() {
      this.dialogFormVisible = false
    },
    initEntityList() {
      this.listLoading = true
      if (this.datePicker && this.datePicker.length > 0) {
        this.entityListQuery.startDate = this.datePicker[0]
        this.entityListQuery.endDate = this.datePicker[1]
      } else {
        this.entityListQuery.startDate = ''
        this.entityListQuery.endDate = ''
      }
      statPartnerIncome(this.entityListQuery).then(response => {
        if (response.isError) return
        this.partnerIncome = response.data
      })
      pagingPartner(this.entityListQuery).then(response => {
        if (response.isError) return
        this.partnerIncomeList = response.data.records
        this.total = response.data.total
        this.listLoading = false
        this.partnerIncomeList.forEach(partnerIncome => {
          if (!partnerIncome.oneRecruiterNum) {
            partnerIncome.oneRecruiterNum = 0
          }
          if (!partnerIncome.twoRecruiterNum) {
            partnerIncome.twoRecruiterNum = 0
          }
          if (!partnerIncome.oneMemberNum) {
            partnerIncome.oneMemberNum = 0
          }
          if (!partnerIncome.twoMemberNum) {
            partnerIncome.twoMemberNum = 0
          }
          if (!partnerIncome.oneOrderNum) {
            partnerIncome.oneOrderNum = 0
          }
          if (!partnerIncome.twoOrderNum) {
            partnerIncome.twoOrderNum = 0
          }
          if (!partnerIncome.oneOrderAmount) {
            partnerIncome.oneOrderAmount = 0
          }
          if (!partnerIncome.twoOrderAmount) {
            partnerIncome.twoOrderAmount = 0
          }
          if (!partnerIncome.oneShareOrderAmount) {
            partnerIncome.oneShareOrderAmount = 0
          }
          if (!partnerIncome.twoShareOrderAmount) {
            partnerIncome.twoShareOrderAmount = 0
          }
        })
      })
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.entityListQuery.size = val
      this.initEntityList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.entityListQuery.currentPage = val
      this.initEntityList()
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 查询
    handleSearch() {
      this.entityListQuery.currentPage = 1
      this.initEntityList()
    },
    handleExport() {
      downloadFile('/user/enterprisePartner/exportPartnerShopIncome', this.entityListQuery, '合伙人业绩.xlsx')
    },
    showTwoPartner(row) {
      this.$router.push({ path: '/partner/achievement/two-partner/index', query: { partnerId: row.partnerId, partnerName: row.partnerName, commissionType: '1' }})
    }
  }
}

</script>
<style lang="less" scoped>
.tips{
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  background-color: #fff7cc;
  color: #333333;
  padding-left: 20px;
}
.total-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .grid-content{
    text-align: center;
    flex: 1;
    border-right: 1px solid rgba(134, 134, 134, 0.35);
    &:last-child{
      border-right: unset;
    }
  }
}
.line-h-14{
  line-height: 1.4;
}
</style>
